{% load i18n static common %}
{% autoescape off %}
    <div id="{{ model_name }}_edit_form" style="{% block form_style %}padding: 10px;{% endblock %}">
        <form class="layui-form data-form" action="" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {% with adminform.form as f %}
                <div class="layui-card">
                    <div class="layui-card-body" style="padding-top: 10px">
                        <div class="layui-row">
                            <div class="layui-form-item">
                                <div class="layui-inline field-before">
                                <label class="layui-form-label"
                                       for="id_type">{% trans 'messenger_field_employee' %}</label>
                                <div class="layui-input-inline ">
                                  <input name="type" id="id_type" lay-filter="id_type" value="" class="layui-input" readonly>
                                  <div id="employee_origin">
                                    <script>
                                      {% if f.instance.id %}
                                          var globalEmpSelected = [];
                                        {% for item in f.instance.employee.all %}
                                          var emp_item = {
                                            id: {{ item.id }},
                                            emp_code: '{{ item.emp_code }}',
                                            {% if item.first_name %}
                                              first_name: '{{ item.first_name }}',
                                            {% else %}
                                              first_name: '',
                                            {% endif %}
                                            {% if item.last_name %}
                                              last_name: '{{ item.last_name }}',
                                            {% else %}
                                              last_name: '',
                                            {% endif %}
                                            {% if item.department.dept_name %}
                                              dept_name: '{{ item.department.dept_name }}',
                                            {% else %}
                                              dept_name: '',
                                            {% endif %}
                                          }
                                          globalEmpSelected.push(emp_item)
                                          {% endfor %}
                                          $('#employee_origin').append('<input type="hidden" name="messenger_employee" value="{{ f.instance.messenger_employee.id }}"/>');
                                          $('#id_type')[0].value = '{{ f.instance.messenger_employee.emp_code}}';
                                      {% else %}
                                          globalEmpSelected=[]
                                      {% endif %}
                                    </script>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="layui-form-item">
                                {% layui_inline f.is_valid %}
                            </div>
                            <div class="layui-form-item">
                                {% layui_inline f.remark %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab layui-tab-brief" lay-filter="employee_profile_tabs">
                    <ul class="layui-tab-title">
                        <li lay-id="emp_attendance" class="layui-this">{% trans 'employee_attendance_settings' %}</li>
                         {% if not 'MESSENGER_DEFAULT'|get_settings_param %}
                            <li lay-id="emp_detail" class="layui-hide">{% trans 'employee_moreDetail_setting' %}</li>
                         {% endif %}
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div style="margin-bottom: 5px;">
                                {% layui_inline f.message_head %}
                                {% layui_inline f.message_tail %}
                            </div>
                           <div style="margin-bottom: 5px;">
                                {% layui_inline f.real_time %}
                                {% layui_inline f.summary %}
                            </div>
                            <div style="margin-bottom: 5px;">
                                {% layui_inline f.department_real_time %}
                                {% layui_inline f.receive_app_transaction %}
                            </div>
                             <div style="margin-bottom: 5px;">
                                {% layui_inline f.receive_photo %}
                            </div>
                            {% if 'MESSENGER_DEFAULT'|get_settings_param %}
                                 {% layui_inline f.bot_uid %}
                            {% endif %}
                        </div>
                        {% if not 'MESSENGER_DEFAULT'|get_settings_param %}
                            <div class="layui-tab-item">
                             {% else %}
                                    <div class="layui-tab-item layui-hide">
                                 {% endif %}
                                <div style="margin-bottom: 5px;">
                                    {% layui_inline f.bot_id %}
                                    {% layui_inline f.bot_pid %}
                                </div>
                                    <div style="margin-bottom: 5px;">
                                        {% layui_inline f.messenger_token %}
                                        {% layui_inline f.messenger_authorization %}
                                    </div>
                            </div>
                    </div>
                </div>
            {% endwith %}
        </form>
    </div>
    <script>
        $(function () {
            layui.use(['form', 'laydate','table'], function () {
                var form = layui.form;
                var laydate = layui.laydate;
                var table = layui.table;
                $("form.layui-form input.layui-time").each(function () {
                    laydate.render({elem: this, type: 'time'});
                });
                form.on('select', function (data) {
                    if (data.value === "200") {
                        $("#id_box_push_time").show();
                    } else if (data.value === "100") {
                        $("#id_box_push_time").hide();
                    }
                });
                form.render();
                $('#id_type').click(function () {
                    $.ajax({
                      url: "/personnel/employee_frame/",
                      type: "GET",
                      dataType: "html",
                      success: function(pannel) {
                          layer.open({
                              type: 1,
                              title: "{% trans 'messenger_field_employee' %}",
                              zIndex: 1003,
                              area: ['1080px', '550px'],
                              content: pannel,
                              btn: [gettext("btn_confirm"), gettext("btn_cancel")],
                              success: function(layero, index){
                                console.log(222)
                                for (i = 0; i < globalEmpSelected.length; i++) {
                                    globalEmpSelected[i]['LAY_CHECKED'] = true;
                                }
                                var selected_table = table.reload('id-employee-frame-selected', {data: globalEmpSelected});
                                var unselect = table.reload('id-employee-frame-unselect');
                              },
                              yes: function(index, layero){
                                var name_val = $('#employeeFrameSelectedDetailContainer').val()
                                $('#id_type')[0].value = name_val;
                                $('#employee_origin').html('')
                                globalEmpSelected = layui.table.checkStatus('id-employee-frame-selected').data;
                                if (globalEmpSelected.length>1){
                                    layer.open({
                                        content: "{% trans 'messenger_field_require_only_one_selected' %}",
                                        btn: ['ok'],
                                        title: 'Message',
                                        icon: 5
                                    });
                                    return false
                                }
                                for (i = 0; i < globalEmpSelected.length; i++) {
                                    $('#employee_origin').append('<input type="hidden" name="messenger_employee" value="' + globalEmpSelected[i].id + '"/>');
                                }
                                layer.close(index)
                              }
                          });
                      },
                      error: function(response) {
                          console.log(response.responseText);
                      }
                      })
                    });
            });
        });
        if ($("#id_message_type").val() !== "200") {
            $("#id_box_push_time").hide();
        }
    </script>
{% endautoescape %}